<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: fin
  Date: 2018/4/26
  Time: 13:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="page home js_show">
    <div class="page__bd" style="height: 100%;">
        <div class="weui-tab">
            <div class="weui-tab__panel" id="tab_panel">

            </div>
            <div class="weui-tabbar">
                <a href="javascript:switchTab();" class="weui-tabbar__item weui-bar__item_on">
                    <span style="display: inline-block;position: relative;">
                        <img src="<c:url value="/statics/img/home.png"/>" alt="" class="weui-tabbar__icon">
                        <span class="weui-badge" style="position: absolute;top: -2px;right: -13px;">8</span>
                    </span>
                    <p class="weui-tabbar__label">主页</p>
                </a>
                <a href="javascript:switchTab();" class="weui-tabbar__item">
                    <span style="display: inline-block;position: relative;">
                        <img src="<c:url value="/statics/img/info.png"/>" alt="" class="weui-tabbar__icon">
                        <span class="weui-badge weui-badge_dot" style="position: absolute;top: 0;right: -6px;"></span>
                    </span>
                    <p class="weui-tabbar__label">信息</p>
                </a>
                <a href="javascript:switchTab();" class="weui-tabbar__item">
                    <img src="<c:url value="/statics/img/me.png"/>" alt="" class="weui-tabbar__icon">
                    <p class="weui-tabbar__label">我</p>
                </a>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" class="tabbar js_show">
    $(function(){
        $('.weui-tabbar__item').on('click', function () {
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
        });
    });

    function switchTab(url) {
        console.log('tab switch to', url);
        if(url) {
            $.ajax({
                url: url,
                dataType: 'html',
                method: 'get',
                success: function (html) {
                    $("#tab_panel").html(html);
                }
            })
        }

    }
</script>